<!-- 薪酬-基础设置-最低工资 -->
<template>
  <pageHeaderNew
    :title="title"
    :breadCrumb="breadCrumb"
    showBack
  ></pageHeaderNew>
  <div class="wrap">
    <div>
      <a-list :bordered="false" :split="false" size="small">
        <template #header>
          <span style="font-size: 24px">使用指南</span>
        </template>
        <a-list-item v-for="(item, index) in listArr" :key="index"
          >{{ item }}
        </a-list-item>
      </a-list>
    </div>
    <div>
      <div class="header">
        <div>
          <a-space>
            <span>城市名称:</span>
            <a-cascader
              :options="citiesJson"
              :field-names="{
                value: 'code',
                label: 'name'
              }"
              v-model="cityName"
              allow-search
              allow-clear
              @change="onSearch"
              style="width: 150px"
            />
            <a-button @click="reset">重置</a-button>
          </a-space>
          <!-- <a-input-search
            :style="{ width: '220px' }"
            placeholder="城市名称"
            search-button
            @search="onSearch"
            @press-enter="onSearch"
            v-model="cityName"
          /> -->
        </div>
        <div>
          <a-button type="primary" @click="add(null)" style="margin-right: 10px"
            >新增最低工资</a-button
          >
          <a-button type="outline" @click="edit(null)">历史最低工资</a-button>
        </div>
      </div>
      <table-turn :table-data="getTableData" ref="tableRef" :args="args">
        <a-table-column :width="80">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column :width="200" data-index="cityCode" title="城市">
          <template #cell="{ record }">
            {{
              cityData.find((item) => item.code === record.cityCode.slice(0, 2))
                ?.name +
              cityData.find((item) => item.code === record.cityCode)?.name
            }}
          </template>
        </a-table-column>
        <a-table-column :width="200" data-index="definition" title="类型">
        </a-table-column>
        <a-table-column :width="200" data-index="wage" title="工资标准(元/月)">
        </a-table-column>
        <a-table-column :width="200" data-index="startDate" title="启用时期">
        </a-table-column>
        <a-table-column :width="200" data-index="endDate" title="结束日期">
        </a-table-column>
        <a-table-column :width="200" data-index="" title="操作" fixed="right">
          <template #cell="{ record }">
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
                @click="add(record)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="del(record.id)"
              >
                <icon-font
                  type="icon-delete"
                  :size="26"
                  :style="{
                    cursor: 'pointer',
                    marginRight: '10px'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table-column>
      </table-turn>
    </div>
  </div>
  <AddModal
    v-model:visible="modalVisible"
    :city-data="currData"
    @addMiniSalaryEmit="addMiniSalaryEmit"
  ></AddModal>
</template>

<script lang="ts" setup>
import citiesJson from '@/assets/json/pc-code.json';
import { flattenArrayWithChildren } from '@/utils/utils';
import {
  AddMiniSalary,
  GetMiniSalaryList,
  DelMiniSalaryList,
  ModifyMiniSalary
} from '@/apis/management/salary/baseSetting';
import { TaddMiniSalary } from '@/apis/management/salary/baseSetting/type';
import AddModal from './AddModal.vue';
const title = '最低工资';

const breadCrumb: string[] = ['薪酬', '基础设置', '薪酬设置', '最低工资'];

const listArr = [
  `1、设置工资标准，每个城市同一时间段内，相同的类型仅可以新增一个工资标准。`,
  `2、设置后，在请假扣款、加班费计算规则设置中，可以引用工资标准，参与工资计算。`,
  `3、当一个城市在结束日期后新增了新的工资标准，旧标准则自动移至历史数据可点击“查看历史数据”。`
];

let tableRef = ref();
// 选择器配置
const args = {
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
};

// 储存选中的数据
const selectedList = computed(() => tableRef.value.selectedList);

let modalVisible = ref(false); // 判断新增弹出框是否打开
let currData = ref<TaddMiniSalary | null>({
  cityCode: '',
  endDate: '',
  startDate: '',
  wage: undefined
}); // 储存当前选中数据

let cityData = flattenArrayWithChildren(citiesJson); // 储存扁平化后的数据
let cityName = ref('');
// 获取表格数据
const getTableData = async (pageData?: any) => {
  try {
    let cityCode;
    if (cityName.value) {
      cityCode = cityData.find((item) =>
        item.name.includes(cityName.value)
      )?.code;
    }
    console.log(cityCode);

    const res = await GetMiniSalaryList({
      ...pageData,
      cityCode: cityName.value
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

const onSearch = () => {
  refresh({
    pageNumbe: 0,
    pageSize: -1
  });
};

// 新增/编辑
const add = (record: TaddMiniSalary | null) => {
  currData.value = record;
  modalVisible.value = true;
};

// 删除某一行
const del = async (id: number) => {
  try {
    await DelMiniSalaryList({
      ids: selectedList.value.length > 0 ? selectedList.value : [id]
    });
    selectedList.value.length = 0;
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 弹窗自定义事件
const addMiniSalaryEmit = async (record: TaddMiniSalary) => {
  try {
    // 编辑
    if (record.id) {
      await ModifyMiniSalary(record);
    }
    // 新增
    else {
      await AddMiniSalary(record);
    }
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

const reset = () => {
  cityName.value = '';
  refresh();
};

// 刷新表格数据
const refresh = (pageData?: any) => {
  tableRef.value.loadData(pageData);
};
</script>

<style lang="less" scoped>
.wrap {
  padding: 10px 20px;
  .header {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
  }
}
</style>
